﻿@{
    ViewBag.Title = "Experiences";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section headSection{
    <link rel="stylesheet"type="text/css" href="/Content/css/jquery.qtip.css" />
    <style type="text/css">
        .timeline{overflow:auto;height: 400px;border:1px solid #ccc;background:url(/Content/images/resume-bg-8.jpg)}
        .timeline ul.container{width:1654px;}
        .timeline ul.container li{width:400px;height:400px;float:left;}
        .timeline ul.container li div.event-head{width:400px;height:60px;background:url(/Content/images/resume/opcity50.png);display:none}
        .timeline ul.container li div.event-body{width:400px;height:260px;color:#eee;margin-top:15px;}
        .timeline ul.container li div.event-foot{width:400px;height:80px;background:url(/Content/images/resume/opcity50.png);}
        
        .timeline ul.container li div.event-head p{line-height:20px;padding:.5em;color:#333}
        
        .timeline ul.container li div.event-foot .left{height:64px;width:64px;padding:8px;}
        .timeline ul.container li div.event-foot .right{padding-top:5px;width:315px;}
        .timeline ul.container li div.event-foot p.time{font-size:16px;color:White;font-family:Segoe UI;font-weight:bold}
        .timeline ul.container li div.event-foot p a{color:#eee}
        .timeline ul.container li div.event-foot p.company{margin-top:.5em;}
        .timeline ul.container li div.event-foot p.department{margin-top:.5em;}
        
        .event-body .event-item{-moz-border-radius:5px;border-radius:5px;margin:6px;line-height:16px;padding:.2em .8em;background:url(/Content/images/resume/opcity50.png);float:left}
        .event-body .important{color:orange;font-weight:bold; cursor:pointer}
        .event-body .small{width:100px;height:40px;}
        .event-body .fixed{width:300px;line-height:30px}
        .event-body h5{font-size:14px;}
    </style>
    <script type="text/javascript" src="/Content/js/jquery.qtip.js"></script>
    <script type="text/javascript" src="/Content/js/jquery.mousewheel.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#timeline').css({
                'overflow': 'hidden', // change to hidden for JS users
                'cursor': '-moz-grab' // add the grab cursor
            }).mousedown(function (event) {
                $(this).data('down', true).data('x', event.clientX).data('scrollLeft', this.scrollLeft);
                return false;
            }).mouseup(function (event) {
                $(this).data('down', false);
            }).mousemove(function (event) {
                if ($(this).data('down') == true) {
                    this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
                    //$('#voiceword').html(this.scrollLeft);
                }
            }).mousewheel(function (event, delta) {
                this.scrollLeft -= (delta * 50);
            });
            document.getElementById('timeline').scrollLeft = 648;

            $('.event-body').find('.important').tipTip({
                activation: 'click',
                attribute: 'content',
                delay: 0,
                defaultPosition: 'bottom',
                keepAlive: true,
                maxWidth: '350px'
            });
        });
        $(window).mouseout(function (event) {
            if ($('#timeline').data('down')) {
                try {
                    if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
                        $('#timeline').data('down', false);
                    }
                } catch (e) { }
            }
        });
    </script>
}

<div class="timeline" id="timeline">
    <ul class="container">
        <li>
            <div class="event-foot">
                <div class="left">
                    <img src="/Content/images/resume/logo-bit.png" alt="BIT"/>
                </div>
                <div class="right">
                    <p class="time">2002.09 - 2006.07</p>
                    <p class="company"><a href="http://www.bit.edu.cn" target="_blank">北京理工大学</a></p>
                    <p class="department"><a href="javascript:;">材料科学与工程学院</a> <a href="javascript:;">本科生</a></p>
                </div>
            </div>
            <div class="event-body">
                <div class="event-item fixed">GPA Top Quarter</div>
                <div class="event-item fixed important" content="<a href='http://home.bitnp.net/' target='_blank'>点击访问北京理工大学网络开拓者协会</a>">网络开拓者协会</div>
                <div class="event-item fixed">材料学院学生科技协会</div>
            </div>
        </li>
        <li>
            <div class="event-foot">
                <div class="left">
                    <img src="/Content/images/resume/logo-bit.png" alt="BIT"/>
                </div>
                <div class="right">
                    <p class="time">2006.09 - 2008.07</p>
                    <p class="company"><a href="http://www.bit.edu.cn" target="_blank">北京理工大学</a></p>
                    <p class="department"><a href="javascript:;">材料科学与工程学院</a> <a href="javascript:;">研究生</a></p>
                </div>
            </div>
            <div class="event-body">
                <div class="event-item fixed">GPA Top 10%</div>
                <div class="event-item fixed important" content="">
                    <h5>研究课题:计算机辅助材料热性能预测</h5>
                    <p>
                        * 发表英文论文2篇<br />
                        * 优秀研究生<br />
                        * 优秀毕业生<br />
                    </p>
                </div>
            </div>
        </li>
        <li style="width:450px;">
            <div class="event-foot" style="width:450px;">
                <div class="left">
                    <img src="/Content/images/resume/logo-sina.png" alt="Sina"/>
                </div>
                <div class="right">
                    <p class="time">2008.03 - 2010.09</p>
                    <p class="company"><a href="http://www.sina.com.cn" target="_blank">新浪网技术(中国)有限公司</a></p>
                    <p class="department"><a href="http://mall.sina.com.cn" target="_blank">电子商务部</a> <a href="javascript:;">.Net开发工程师</a></p>
                </div>
            </div>
            <div class="event-body">
                <div class="event-item small important" content="<a href='http://yangfanbook.sina.com.cn/' target='_blank'>点击访问扬帆计划</a>">扬帆计划</div>
                <div class="event-item small">商城搜索与爱问数据对接</div>
                <div class="event-item small">搜索数据同步winform应用程序</div>
                <div class="event-item small">生活频道数据对接</div>
                <div class="event-item small important" content="角色：开发工程师，负责项目的底层存储过程、数据访问层及UI中的RIA开发">博客小店</div>
                <div class="event-item small important" content="角色：开发工程师，负责与代理商机票数据的同步、性能调优工作">机票系统</div>
                <div class="event-item small important" content="角色：项目负责人，承担了发布系统的整体重构，对发布系统的性能反复进行测试并持续优化任务，从数据库端存储过程的执行时间到算法调优，以及发布生成的HTML及CSS代码的精简，减小页面尺寸，配合服务器端压缩，大幅提高了用户浏览体验">动态发布系统</div>
                <div class="event-item small important" content="角色：项目负责人、合作创始人，对商城发布的业务进行划分和剥离，首次基于自定义的asp.net服务器标记，采用asp.net webform作为发布模板，自动填充html内容并发布为静态页面">基于asp.net标签的静态发布系统</div>
                <div class="event-item small">自助店webservice</div>
                <div class="event-item small">抢购系统</div>
                <div class="event-item small">新浪sso登陆对接</div>
                <div class="event-item small">新付通支付接口接入</div>
                <div class="event-item small">邮政贺卡项目</div>
                <div class="event-item small">商城系统重构项目</div>
                <div class="event-item small">相册冲印项目</div>
            </div>
        </li>
        <li>
            <div class="event-foot">
                <div class="left">
                    <img src="/Content/images/resume/logo-cosin.png" alt="Cosin"/>
                </div>
                <div class="right">
                    <p class="time">2010.09 - 2012.01</p>
                    <p class="company"><a href="http://www.patcloud.net" target="_blank">康盛云动力软件服务有限公司</a></p>
                    <p class="department"><a href="javascript:;">技术部</a> <a href="javascript:;">Team Leader</a></p>
                </div>
            </div>
            <div class="event-body">
                <div class="event-item fixed important" content="开发经理，负责前期项目技术方案的制定、UE的设计、项目架构设计、开发任务管理、项目的测试和现场实施以及交付验收全生命周期。项目架构采用模块化的权限管理及文件管理系统等，分离的组件解耦了大型平台的依赖关系">康盛企业知识产权网络化服务平台</div>
                <div class="event-item fixed important" content="产品经理、开发经理，负责产品需求调研、产品设计及开发管理。采用了开源ORM组件Castle ActiveRecord，配合代码生成器及已趋稳定的前后端架构，实现了产品的快速开发">康盛企业知识产权流程管理系统</div>
                <div class="event-item fixed important" content="产品经理、开发经理，负责产品需求调研、产品设计及开发管理。采用了开源ORM组件Castle ActiveRecord，配合代码生成器及已趋稳定的前后端架构，实现了产品的快速开发">康盛知识产权代理机构案件管理系统</div>
                <div class="event-item fixed important" content="产品经理、开发经理，采用Lucene构建索引和搜索，采用盘古分词进行中文分词，Sliverlight开源绘图组件visifire绘制检索结果分析图表">康盛专利搜索引擎</div>
                <div class="event-item fixed">康盛企业应用开发基础架构的搭建</div>
                <div class="event-item fixed">康盛搜索引擎专利蜘蛛的开发及数据处理</div>
            </div>
        </li>
    </ul>
</div>